<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/theme.css}">
    <style>
        #footer {
            padding: 15px 0;
            background: #fff;
            border-top: 1px solid #ddd;
            text-align: center;
        }

        #topcontrol {
            color: #fff;
            z-index: 99;
            width: 30px;
            height: 30px;
            font-size: 20px;
            background: #222;
            position: relative;
            right: 14px !important;
            bottom: 11px !important;
            border-radius: 3px !important;
        }

        #topcontrol:after {
            /*top: -2px;*/
            left: 8.5px;
            content: "\f106";
            position: absolute;
            text-align: center;
            font-family: FontAwesome;
        }

        #topcontrol:hover {
            color: #fff;
            background: #18ba9b;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        .label-type, .label-status, .label-order {
            background-color: #fff;
            color: #f60;
            padding: 5px;
            border: 1px #f60 solid;
        }

        #typeList :not(:first-child) {
            margin-top: 20px;
        }

        .label-txt {
            margin: 10px 10px;
            border: 1px solid #ddd;
            padding: 4px;
            font-size: 14px;
        }

        .panel {
            border-radius: 0;
        }

        .progress-bar-default {
            background-color: #ddd;
        }
    </style>
</head>
<body>
<div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/" style="font-size:32px;">互联网医药平台</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse" style="float:right;">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
                                class="glyphicon glyphicon-user"></i><span
                                th:text="${session.user.getUserName()}"></span><span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="member.html"><i class="glyphicon glyphicon-scale"></i> 我的信息</a></li>
                                <li><a href="#"><i class="glyphicon glyphicon-comment"></i> 消息</a></li>
                                <li class="divider"></li>
                                <li><a href="/user/outLogin"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>

<div class="container theme-showcase" role="main">


    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">

                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="container-fluid">
                            <div class="panel-body">
                                <div class="container-fluid">
                                    <div class="row clearfix">
                                        <div class="col-md-12 column">
                                            <div class="alert alert-warning alert-dismissable" style="color:red;">
                                                <button type="button" class="close" data-dismiss="alert"
                                                        aria-hidden="true">×
                                                </button>
                                                <i class="glyphicon glyphicon-info-sign"></i> <strong>请在下单后15分钟内付款，否则您的订单会被自动关闭。</strong>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="address" class="container-fluid">
                                    <div class="row clearfix">
                                        <div class="col-md-12 column">
                                            <blockquote
                                                style="border-left: 5px solid #f60;color:#f60;padding: 0 0 0 20px;">
                                                <b>
                                                    收货地址
                                                </b>
                                            </blockquote>
                                        </div>
                                        <div class="col-md-12 column" style="padding:0 120px;">
                                            <div class="col-md-12 column">
                                                <form class="form-horizontal">
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">收货人（*）</label>
                                                        <div class="col-sm-10">
                                                            <input readonly id="userid" type="text" class="form-control" style="width:200px;"
                                                                   th:value="${session.user.userName}" th:name="${session.user.userId}"/>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">手机（*）</label>
                                                        <div class="col-sm-10">
                                                            <input readonly class="form-control" type="text" style="width:200px;"
                                                                   th:value="${session.user.telphone}" />
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">地址（*）</label>
                                                        <div class="col-sm-10">
                                                            <input readonly class="form-control" type="text" style="width:400px;"
                                                                   th:value="${session.user.address}"/>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="container-fluid">
                                    <div class="row clearfix">
                                        <div class="col-md-12 column">
                                            <blockquote
                                                style="border-left: 5px solid #f60;color:#f60;padding: 0 0 0 20px;">
                                                <b>
                                                    发票信息
                                                </b>
                                            </blockquote>
                                        </div>
                                        <div class="col-md-12 column" style="padding:0 120px;">
                                            <div class="radio">
                                                <label>
                                                    <input type="radio" name="optionsRadios11" id="optionsRadios11"
                                                           value="option1" checked>
                                                    无需发票
                                                </label>
                                            </div>
                                            <div class="radio">
                                                <label>
                                                    <input type="radio" name="optionsRadios11" id="optionsRadios22"
                                                           value="option2">
                                                    需要发票
                                                </label>
                                            </div>
                                            <div class="fapiao" style="display:none;border:10px solid #f60;border-bottom-color: #eceeef;border-width: 10px;width:20px;margin-left:20px;margin-top:-20px;
                                             border-left-color: rgba(221, 221, 221, 0);
                                             border-top-color: rgba(221, 221, 221, 0);
                                             border-right-color: rgba(221, 221, 221, 0);
                                    "></div>
                                            <div class="fapiao panel panel-default"
                                                 style="display:none;border-style: dashed;background-color:#eceeef">
                                                <div class="panel-body">
                                                    <div class="col-md-12 column">
                                                        <form class="form-horizontal">
                                                            <div class="form-group">
                                                                <label class="col-sm-2 control-label">发票抬头（*）</label>
                                                                <div class="col-sm-10">
                                                                    <input type="text" class="form-control"
                                                                           style="width:200px;" placeholder="个人">
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row clearfix">
                                    <div class="col-md-12 column">
                                        <blockquote style="border-left: 5px solid #f60;color:#f60;padding: 0 0 0 20px;">
                                            <b>
                                                请确认信息和购买数量
                                            </b>
                                        </blockquote>
                                    </div>
                                    <div class="col-md-12 column">
                                        <table class="table table-bordered" style="text-align:center;">
                                            <thead>
                                            <tr style="background-color:#ddd;">
                                                <td>药物名称</td>
                                                <td>单价(元)</td>
                                                <td>产地</td>
                                                <td>剂量</td>
                                                <td>生产日期</td>
                                                <td>有效期</td>
                                                <td>数量</td>
                                                <td>配送费用</td>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td id="dname" th:name="${drugInfo.drugId}" th:text="${drugInfo.drugName}"></td>
                                                <td id="price" th:text="${drugInfo.drugPrice}"></td>
                                                <td th:text="${drugInfo.drugPlace}"></td>
                                                <td th:text="${drugInfo.drugDose}"></td>
                                                <td th:text="${drugInfo.drugCreateDate}"></td>
                                                <td th:text="${drugInfo.drugEffective}"></td>
                                                <td><input type="number" name="count" th:min="1" value="1"
                                                           style="width: 40px" th:onchange="shuliang()"></td>
                                                <td>免运费</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="col-md-12 column">
                                    <blockquote style="border-left: 5px solid #f60;color:#f60;padding: 0 0 0 20px;">
                                        <b>
                                            账单
                                        </b>
                                    </blockquote>
                                </div>

                                <div class="col-md-12 column">
                                    <div class="alert alert-warning alert-dismissable"
                                         style="text-align:right; border:2px solid #ffc287;">
                                        <ul style="list-style:none;">
                                            <li style="margin-top:10px;">配送费用：<span style="color:red;">￥0.00</span></li>
                                            <li style="margin-top:10px;">优惠金额：<span style="color:red;">-￥0.00</span>
                                            </li>
                                            <li style="margin-top:10px;margin-bottom:10px;"><h2>支付总金额：￥<span
                                                style="color:red;"><input name="totalMoney"
                                                                          style="color: red;font-size:30px;color:#F60;width: 80px"
                                                                          th:value="${drugInfo.drugPrice}"/></span></h2>
                                            </li>
                                            <li style="margin-top:10px;">
                                                请在下单后15分钟内付款，否则您的订单会被自动关闭。
                                            </li>
                                            <li style="margin-top:10px;">
                                                <button id="but1" disabled="disabled" type="button" class="btn btn-warning btn-lg"
                                                        ><i
                                                    class="glyphicon glyphicon-credit-card"></i> 立即付款
                                                </button>
                                            </li>
                                            <li style="margin-top:10px;">
                                                <div class="checkbox">
                                                    <label>
                                                        <input name="chec" type="checkbox" > 我已了解风险和规则
                                                    </label>
                                                </div>
                                            </li>
                                        </ul>


                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="container" style="margin-top:20px;">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div id="footer">
                        <div class="footerNav">
                            <a rel="nofollow" href="http://www.qf.com">关于我们</a> | <a rel="nofollow"
                                                                                     href="http://www.qf.com">服务条款</a> |
                            <a
                                rel="nofollow" href="http://www.qf.com">免责声明</a> | <a rel="nofollow"
                                                                                      href="http://www.qf.com">网站地图</a>
                            | <a rel="nofollow" href="http://www.qf.com">联系我们</a>
                        </div>
                        <div class="copyRight">
                            Copyright ?2010-2014qf.com 版权所有
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div> <!-- /container -->
</body>
<script th:src="@{/jquery/jquery-2.1.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/script/docs.min.js}"></script>
<script th:src="@{/script/back-to-top.js}"></script>
<script>
    $("input").css("border", "hidden");
    var count = 1;
    var price = 0;
    var totalMoney = 0;

    function shuliang() {
        count = $("input[name='count']").val();
        price = $("#price").text();;
        console.log(count + "=======" + price)
        totalMoney = count * price;
        console.log(totalMoney)
        $("input[name='totalMoney']").val(totalMoney);
    }
    $(function () {
        var userId=$("#userid").attr("name");
        console.log(userId+'======================');
        var drugId=$("#dname").attr("name");
        var dname=$("#dname").text();
        var totalPrice = $("input[name='totalMoney']").val();
        console.log(dname+'======================'+drugId+totalPrice);
        $("input[name='chec']").click(function () {
            if($("input[name='chec']").is(':checked')){
                $("#but1").removeAttr("disabled");
            }else {
                $("#but1").attr("disabled","disabled");
            }
        })
        $("#but1").click(function () {
            $.ajax({
               url: "/order/add",
               type: "POST",
                data: {
                   userId: userId,
                    drugId:drugId,
                    totalPrice:totalPrice
                },
                success:function () {
                    if (confirm("是否继续购买")){
                        location.href = '/drug/project?id='+drugId;
                    }else {
                        location.href = '/';
                    }
                }
            })
        })

    })

</script>

</html>